<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-02-25 10:03:51
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 14:08:03
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\dashboard\components\bigeachart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bigechart"><pb-drawer v-model="props.isVisible" :title="'经营分析'" :direction="'btt'" :size="'92%'"
      @cancelFn="CancelFn">
      <div class="flex items-center m-b4 p-t6" style="flex-wrap: wrap;">
        <pb-select v-model="EchartFrom.tenantId" width="200" placeholder="请选择餐厅" keys="tenantId" label="tenantName"
          :options="KitchenList" @change="selectkitchenFn($event)" />
        <pb-date-picker class="m-l4" v-model="planDateRang" placeholder="请输入日期" @change="dateChange"></pb-date-picker>
        <pb-check class="m-l4" :list="staList" @change="changeCheck($event)" :isSingle="true"></pb-check>
        <div class="btndiv" style="margin-left: auto;" v-show="EchartFrom.tenantId != 'all'">
          <div :class="{ boderdiv: SaleroiStatus == 'statis' }" @click="setSaleroiStatusFn('statis')"
            :style="{ 'border-right': SaleroiStatus == 'roi' ? 'none' : '' }">经营数据</div>
          <div :class="{ boderdiv: SaleroiStatus == 'roi' }" @click="setSaleroiStatusFn('roi')"
            :style="{ 'border-left': SaleroiStatus == 'statis' ? 'none' : '' }">投产比</div>
        </div>
      </div>
      <div>
        <Allechart v-if="EchartFrom.tenantId == 'all'" ref="refAllechart1" />
        <Singlechart v-else ref="refSinglechart" />
      </div>
      <template #footer></template>
    </pb-drawer></div>
</template>
<script setup lang="ts">
import { getHomeSaleStatisApi, getHomeSaleRoiApi, getHomeAllSaleStatisApi } from '@/api/newHome'
import Allechart from './allechart.vue'
import Singlechart from './singlechart.vue'
const emit = defineEmits(['CancelFn'])
const refAllechart1 = ref(null as any)
const refSinglechart = ref(null as any)
let NewDate = new Date() as any
import { formattedDate } from '@/utils/moment'
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  details: {
    type: Object,
    default: {},
  },
  propsKitchenList: {
    type: Object,
    default: [],
  },
  propsstaList: {
    type: Array,
    default: [],
  }
})
const staList = ref(JSON.parse(JSON.stringify(props.propsstaList)))
const KitchenList = ref(JSON.parse(JSON.stringify(props.propsKitchenList)))
const SaleroiStatus = ref('statis' as any)
const EchartFrom = reactive({
  tenantId: ''
})
const planDateRang = ref([] as any)
const CancelFn = () => {
  emit('CancelFn')
}
const selectkitchenFn = () => {
  GetDataechartFn()
}
const changeCheck = (val) => {
  GetDataechartFn()
}
const setSaleroiStatusFn = (type: any) => {
  SaleroiStatus.value = type
  GetDataechartFn()
}
const dateChange = (time: any) => {
  planDateRang.value = [formattedDate(time[0], 'YYYY-MM-DD'), formattedDate(time[1], 'YYYY-MM-DD')]
  GetDataechartFn()
}
const GetDataechartFn = () => {
  let mealTimesCodeList = [] as any
  let mealTimesName = ''
  staList.value.map(el => {
    if (el.checked) {
      mealTimesCodeList.push(el.val)
      mealTimesName += el.label
    }
  })
  // console.log(EchartFrom.tenantId, 'name')
  if (EchartFrom.tenantId != 'all') {
    if (SaleroiStatus.value == 'statis') {
      getHomeSaleStatisApi({
        "beginDate": planDateRang.value[0],
        "endDate": planDateRang.value[1],
        "mealTimesCodeList": mealTimesCodeList,
        "tenantId": EchartFrom.tenantId
      }).then(res => {
        refSinglechart.value.initChart({ ...res.data, mealTimesName, SaleroiStatus: SaleroiStatus.value, height: '680px' })
      })
    } else {
      getHomeSaleRoiApi({
        "beginDate": planDateRang.value[0],
        "endDate": planDateRang.value[1],
        "mealTimesCodeList": mealTimesCodeList,
        "tenantId": EchartFrom.tenantId
      }).then(res => {
        refSinglechart.value.initChart({ ...res.data, mealTimesName, SaleroiStatus: SaleroiStatus.value, height: '680px' })
      })
    }
  } else {
    getHomeAllSaleStatisApi({
      "beginDate": planDateRang.value[0],
      "endDate": planDateRang.value[1],
      "mealTimesCodeList": mealTimesCodeList
    }).then(res => {
      refAllechart1.value.initChart({
        ...res.data,
        mealTimesName,
        height: '680px'
      })
    })
  }
}
onMounted(() => {
  planDateRang.value = [formattedDate(NewDate - 30 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD'), formattedDate(NewDate, 'YYYY-MM-DD')]
  // console.log(props.KitchenList[0], '2')
  EchartFrom.tenantId = KitchenList.value[0].tenantId
  GetDataechartFn()
})
</script>
<style lang="scss" scoped>
.bigechart {
  .btndiv {
    div {
      display: inline-block;
      padding: 0 12px;
      height: 28px;
      line-height: 28px;
      background: #FFFFFF;
      border-radius: 0px 1px 1px 0px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      text-align: center;
      cursor: pointer;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
    }


    .boderdiv {
      border: 1px solid rgba(13, 150, 139, 1);
      color: rgba(13, 150, 139, 1);
      ;
    }

  }
}
</style>
